<template>
	<view class="v-select" id="v-select-type">
		<view :class="['v-select-item',{'v-select-item-selected':data.checked,'v-select-item-isvalue':data.isvalue}]" @click="selectItem">
			<text>{{value.name}}</text>
			<icon class="iconfont icon">&#xe77e;</icon>
		</view>
	</view>
	<!-- 服务分类 -->
	<uni-popup ref="popup" type="top" class="removal" @change="popupChange" :popupTop="data.popupTop" :popupZIndex="9">
		<view class="content">
			<scroll-view class="tab" scroll-y="true">
				<template v-for="(item,index) in list" :key="index">
					<view :class="['item',{'item-selected':index==data.typeIndex}]" v-if="list[index].list.length" @click.stop="data.typeIndex=index">
						<text>{{item.name}}</text>
					</view>
				</template>
			</scroll-view>
			<scroll-view class="tab-items" scroll-y="true">
				<template v-for="(item,index) in tabItems" :key="index">
					<view :class="['item',{'item-selected':item.value==data.typeValue}]" @click.stop="changeType(item)">
						<text>{{item.name}}</text>
					</view>
				</template>
			</scroll-view>
		</view>
	</uni-popup>
</template>
<script setup>
	import { ref, reactive, computed, watch, getCurrentInstance } from 'vue';
	const _this = getCurrentInstance();
	const emits = defineEmits(['callback']);
	const popup = ref(null);
	const props_data = defineProps({
		value: {
			type: Object
		},
		list: {
			type: Array
		}
	});
	watch(() => props_data.value, (newVal) => {
		setTimeout(() => {
			data.isvalue = ['all', 'default', 0].indexOf(newVal.value) < 0;
		}, 200);
	}, { immediate: true });
	const data = reactive({
		checked: false,
		typeIndex: 0,
		typeValue: 'all',
		popupTop: 0,
		isvalue: false
	});
	const tabItems = computed(() => {
		return props_data.list[data.typeIndex].list;
	});
	// 展开/关闭
	async function selectItem() {
		data.typeValue = props_data.value.value;
		props_data.list.forEach((item, index) => {
			item.list.forEach((item2, index2) => {
				if (item2.value == data.typeValue) {
					data.typeIndex = index;
				}
			})
		})
		const res = await selectorQuery();
		data.popupTop = `${res.top+res.height}px`;
		if (!data.checked) popup.value.open();
		else popup.value.close();
		uni.$once('pageScroll', () => {
			if (popup.value) popup.value.close();
		})
	}
	// 获取节点参数
	function selectorQuery() {
		return new Promise((resolve, reject) => {
			const query = uni.createSelectorQuery().in(_this);
			query.select('#v-select-type').boundingClientRect(res => {
				resolve({
					height: res.height,
					top: res.top
				});
			}).exec();
		})
	}
	// 选择服务类型
	function changeType(item) {
		data.typeValue = item.value;
		popup.value.close();
		emits('callback', { ...item, type: props_data.type });
	}

	function popupChange(e) {
		data.checked = e.show;
		if (e.show) {
			uni.$emit('openPopup', `SELECT_${props_data.type}`);
			uni.$once('openPopup', (res) => {
				if (res != `SELECT_${props_data.type}` && popup.value) popup.value.close();
			})
		}
	}
</script>
<style scoped lang="scss">
	@import '@/common/css/base.scss';
	.v-select {
		position: relative;
		z-index: 99999;
		height: 80rpx;
		background-color: #F3F5F7;
	}
	.v-select-item {
		@include flex(row, center);
		height: 80rpx;
		text {
			font-size: 28rpx;
			color: #666;
		}
		.icon {
			margin-left: 6rpx;
			font-size: 28rpx;
			color: #aaa;
		}
		&-selected {
			text {
				color: $color;
			}
			.icon {
				transform: rotate(180deg);
				color: $color;
			}
		}
		&-isvalue {
			text, .icon {
				color: $color;
			}
		}
	}
	.content {
		@include flex(row, space-between, flex-start);
		flex-wrap: nowrap;
		height: 62vh;
		background-color: #fff;
		.tab {
			width: 220rpx;
			height: 100%;
			border-right: 1px solid #eee;
			box-sizing: border-box;
			.item {
				height: 90rpx;
				line-height: 90rpx;
				padding: 0 34rpx;
				font-size: 30rpx;
				color: #333;
				&-selected {
					background-color: #F3F5F7;
					color: $color;
				}
			}
		}
		.tab-items {
			flex: 1;
			height: 100%;
			padding-right: 34rpx;
			.item {
				height: 90rpx;
				line-height: 90rpx;
				padding: 0 50rpx;
				border-bottom: 1px solid #eee;
				font-size: 30rpx;
				color: #333;
				&:last-child {
					border-bottom: none;
				}
				&-selected {
					color: $color;
				}
			}
		}
	}
</style>
